<template>
	<div class="advert-check-container">
		<!-- 搜索区域 -->
		<div class="search-area">
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="广告标题">
					<el-input v-model="searchForm.advertTitle" placeholder="请输入广告标题" clearable />
				</el-form-item>
				<el-form-item label="广告类型">
					<el-select v-model="searchForm.advertType" placeholder="请选择广告类型" clearable style="width: 120px;">
						<el-option label="课程广告" :value="0" />
						<el-option label="校区广告" :value="1" />
					</el-select>
				</el-form-item>
				<el-form-item label="校区名称">
					<el-input v-model="searchForm.campusName" placeholder="请输入校区名称" clearable />
				</el-form-item>
				<el-form-item label="课程名称">
					<el-input v-model="searchForm.courseName" placeholder="请输入课程名称" clearable />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchForm.advertStatus" placeholder="请选择状态" clearable style="width: 120px;">
						<el-option label="草稿" value="草稿" />
						<el-option label="待审核" value="待审核" />
						<el-option label="已通过" value="已通过" />
						<el-option label="已拒绝" value="已拒绝" />
						<el-option label="已发布" value="已发布" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch" style="width: 80px;">查询</el-button>
					<el-button @click="resetSearch" style="width: 80px;">重置刷新</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 表格区域 -->
		<div class="table-area">
			<el-table :data="tableData.records" border stripe style="width: 100%" v-loading="loading">
				<el-table-column prop="advertId" label="广告ID" width="80" align="center" />
				<el-table-column label="广告图" width="200" align="center">
					<template #default="{ row }">
						<el-image style="width: 180px; height: 100px" :src="row.url"
							:preview-src-list="[row.url]" fit="contain" />
					</template>
				</el-table-column>
				<el-table-column prop="advertTitle" label="广告标题" width="180" align="center" />
				<el-table-column label="广告类型" width="100" align="center">
					<template #default="{ row }">
						{{ row.advertType === 0 ? '课程广告' : '校区广告' }}
					</template>
				</el-table-column>
				<el-table-column prop="courseName" label="课程名称" width="150" align="center"/>
				<el-table-column prop="campusName" label="校区名称" width="150" align="center" />
				<el-table-column label="广告链接" width="150" align="center">
					<template #default="{ row }">
						{{ row.linkUrl || '-' }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" width="180" align="center">
					<template #default="{ row }">
						{{ formatDateTime(row.startTime) }}
					</template>
				</el-table-column>
				<el-table-column label="结束时间" width="180" align="center">
					<template #default="{ row }">
						{{ formatDateTime(row.endTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="advertPosition" label="广告位置" width="120" align="center" />
				<el-table-column prop="advertStatus" label="状态" width="100" align="center">
					<template #default="{ row }">
						<el-tag :type="getStatusTagType(row.advertStatus)"
							style="width: 60px;height: 30px;font-size: 14px;">
							{{ row.advertStatus }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="160" align="center">
					<template #default="{ row }">
						<el-button v-if="row.advertStatus === '待审核' || row.advertStatus === '已拒绝'" size="small"
							type="success" @click="handleApprove(row)"
							style="width: 60px;height: 30px;font-size: 14px;">
							通过
						</el-button>
						<el-button v-if="row.advertStatus === '待审核' || row.advertStatus === '已通过'" size="small"
							type="danger" @click="handleReject(row)" style="width: 60px;height: 30px;font-size: 14px;">
							拒绝
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="rejectReason" label="拒绝原因" width="200" align="center" fixed="right" />
			</el-table>

			<!-- 分页 -->
			<div class="pagination-area">
				<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
					:page-sizes="[5, 10, 20, 30]" layout="total, sizes, prev, pager, next, jumper"
					:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<!-- 拒绝原因对话框 -->
		<el-dialog v-model="rejectDialogVisible" title="输入拒绝原因" width="500px">
			<el-form :model="rejectForm" label-width="100px">
				<el-form-item label="拒绝原因">
					<el-input v-model="rejectForm.rejectReason" type="textarea" :rows="4" placeholder="请输入拒绝原因" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="rejectDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmReject">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		getAllAdvertInfo,
		updateAdvert
	} from '@/api/check'

	// 数据定义
	const loading = ref(false)
	const rejectDialogVisible = ref(false)
	const currentAdvertId = ref('')

	// 搜索表单
	const searchForm = reactive({
		advertTitle: '',
		advertType: null,
		campusName: '',
		courseName: '',
		advertStatus: ''
	})

	// 拒绝表单
	const rejectForm = reactive({
		rejectReason: ''
	})

	// 分页数据
	const pagination = reactive({
		currentPage: 1,
		pageSize: 10
	})

	// 表格数据
	const tableData = ref({
		records: [],
		total: 0
	})

	// 状态标签类型映射
	const statusTagType = {
		'草稿': 'info',
		'待审核': 'warning',
		'已通过': 'success',
		'已拒绝': 'danger',
		'已发布': ''
	}

	// 初始化加载数据
	onMounted(() => {
		fetchAdvertList()
	})

	// 获取广告列表
	const fetchAdvertList = async () => {
		try {
			loading.value = true
			const params = {
				advertTitle: searchForm.advertTitle,
				advertType: searchForm.advertType,
				campusName: searchForm.campusName,
				courseName: searchForm.courseName,
				advertStatus: searchForm.advertStatus,
				currentPage: pagination.currentPage,
				pageSize: pagination.pageSize
			}

			const response = await getAllAdvertInfo(params)

			if (response.code === 200) {
				tableData.value = response.data.list || {
					records: [],
					total: 0
				}
			} else {
				tableData.value = {
					records: [],
					total: 0
				}
				ElMessage.warning(response.message || '获取广告列表失败')
			}
		} catch (error) {
			console.error('获取广告列表失败:', error)
			ElMessage.error('获取广告列表失败')
			tableData.value = {
				records: [],
				total: 0
			}
		} finally {
			loading.value = false
		}
	}

	// 格式化日期时间
	const formatDateTime = (dateStr) => {
		if (!dateStr) return ''
		try {
			const date = new Date(dateStr)
			return date.toLocaleString()
		} catch (e) {
			return dateStr
		}
	}

	// 获取状态标签类型
	const getStatusTagType = (status) => {
		return statusTagType[status] || 'info'
	}

	// 搜索广告
	const handleSearch = () => {
		pagination.currentPage = 1
		fetchAdvertList()
	}

	// 重置搜索
	const resetSearch = () => {
		searchForm.advertTitle = ''
		searchForm.advertType = null
		searchForm.campusName = ''
		searchForm.courseName = ''
		searchForm.advertStatus = ''
		handleSearch()
	}

	// 分页大小变化
	const handleSizeChange = (val) => {
		pagination.pageSize = val
		fetchAdvertList()
	}

	// 当前页变化
	const handleCurrentChange = (val) => {
		pagination.currentPage = val
		fetchAdvertList()
	}

	// 通过审核
	const handleApprove = async (row) => {
		try {
			await ElMessageBox.confirm('确定要通过该广告吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})

			const response = await updateAdvert({
				advertId: row.advertId,
				status: '已通过',
				rejectReason: ''
			})

			if (response.code === 200) {
				ElMessage.success('审核通过成功')
				fetchAdvertList()
			} else {
				ElMessage.error(response.message || '审核通过失败')
				fetchAdvertList()
			}
		} catch (error) {
			if (error !== 'cancel') {
				ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
			}
		}
	}

	// 拒绝审核
	const handleReject = (row) => {
		currentAdvertId.value = row.advertId
		rejectForm.rejectReason = ''
		rejectDialogVisible.value = true
	}

	// 确认拒绝
	const confirmReject = async () => {
		try {
			if (!rejectForm.rejectReason) {
				ElMessage.warning('请输入拒绝原因')
				return
			}

			const response = await updateAdvert({
				advertId: currentAdvertId.value,
				status: '已拒绝',
				rejectReason: rejectForm.rejectReason
			})

			if (response.code === 200) {
				ElMessage.success('拒绝成功')
				rejectDialogVisible.value = false
				fetchAdvertList()
			} else {
				fetchAdvertList()
				ElMessage.error(response.message || '拒绝失败')
			}
		} catch (error) {
			ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
		}
	}
</script>

<style scoped>
	.advert-check-container {
		width: 100%;
		padding: 20px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.search-area {
		margin-bottom: 20px;
	}

	.search-form {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.pagination-area {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}

	.el-form-item {
		margin-right: 20px;
		margin-bottom: 0;
	}
</style>